<template>
  <div class="home-container">
    <!-- 轮播 -->
    <div class="home-header-container">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index" @click="bannerTo(item.link)">
          <img v-lazy="imgUrl + item.imgUrl" />
        </van-swipe-item>
      </van-swipe>
      <search />
    </div>
    <!-- 分类 -->
    <div class="home-class-container">
      <div
        class="class-item"
        v-for="(item, index) in classList"
        :key="index"
        @click="classClick(item)"
      >
        <img :src="imgUrl + item.indexpic" alt />
        <p class="class-name">{{ item.name }}</p>
      </div>
    </div>
    <!-- 新品上架 -->
    <div class="new-shopping-container">
      <div class="new-shopping-header">
        <div>
          <img src="@/assets/icon/hot.png" alt />
        </div>
        <div class="title">新品上架</div>
        <div class="date">{{ month }}月{{ day }}日新品上架</div>
        <div class="more" @click="goToList('newProducts')">
          查看更多
          <span class="iconfont icongengduo"></span>
        </div>
      </div>
      <div class="new-shopping-main">
        <div
          class="new-shopping-item"
          v-for="(item, index) in newShoppingList"
          :key="index"
          @click="detailsclick(item.id, 'new')"
        >
          <img :src="imgUrl + item.indexpic" alt />
          <p>
            <span class="new-price">$ {{item.price}}</span>
            <!-- <span class="old-price">$ {{item.price1}}</span> -->
          </p>
        </div>
      </div>
    </div>
    <!-- 限时抢购 -->
    <div class="snapped-up-container" @click="goToList('rushToBuy')">
      <div class="left-container">"限时"抢购</div>
      <div class="right-container">
        <div class="date">{{ month }}月{{ day }}日</div>
        <div class="time">{{ hour }}</div>
      </div>
    </div>
    <div class="snapped-up-shopping">
      <div class="snapped-up-shopping-header">
        <div class="left">点击限时抢购，查看更多</div>
        <div class="right">
          距结束还剩
          <span>{{ snappedUpTime }}</span>
        </div>
      </div>
      <div class="snapped-up-shopping-main">
        <div
          class="snapped-up-shopping-item"
          v-for="(item, index) in snappedUpList"
          :key="index"
          @click="detailsclick(item.id, 'actview')"
        >
          <img :src="imgUrl + item.indexpic" alt />
          <div class="name">{{ item.title }}</div>
          <div class="footer">
            <div class="left">
              <div class="new">
                $
                <span class="price">{{ item.price }}</span>
              </div>
              <div class="old">
                $
                <span class="price">{{ item.price1 }}</span>
              </div>
            </div>
            <!-- <div class="right">抢</div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 广告位1 -->
    <div class="ad">
      <img src="~static/images/1.png" alt />
    </div>
    <!-- 国际拼团 -->
    <div class="together" @click="goToList('collage')">
      <img src="~@/assets/icon/home_1.png" alt />
      <div class="content">
        <div class="title">国际拼团</div>
        <div class="date">{{ month }}月{{ day }}日</div>
      </div>
    </div>
    <div class="snapped-up-shopping">
      <div class="snapped-up-shopping-header">
        <div class="left">点击国际拼团，查看更多</div>
        <div class="right">
          <!-- 距结束还剩
          <span>{{ snappedUpTime }}</span> -->
        </div>
      </div>
      <div class="snapped-up-shopping-main">
        <div
          class="snapped-up-shopping-item"
          v-for="(item, index) in flashgroup"
          :key="index"
          @click="detailsclick(item.id, 'figview')"
        >
          <img :src="imgUrl + item.indexpic" alt />
          <div class="name">{{ item.title }}</div>
          <div class="footer">
            <div class="left">
              <div class="new">
                $
                <span class="price">{{ item.price }}</span>
              </div>
              <div class="old">
                $
                <span class="price">{{ item.price1 }}</span>
              </div>
            </div>
            <div class="right">抢</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 广告位2 -->
    <div class="ad">
      <img src="~static/images/1.png" alt />
    </div>
  </div>
</template>

<script>
import moment from "moment";
import search from "@/components/search";

export default {
  components: { search },
  filters: {
    priceFilter(el) {
      return parseFloat(el);
    }
  },
  data() {
    return {
      month: null,
      day: null,
      hour: null,
      hourTimer: null,
      bannerList: [],
      classList: [],
      newShoppingList: [],
      snappedUpList: [],
      flashgroup: [],
      snappedUpTime: null,
      snappedUpTimer: null
    };
  },
  computed: {
    imgUrl() {
      return this.$imgUrl;
    }
  },
  created() {
    this.month = moment().format("MM");
    this.day = moment().format("DD");

    this.hour = moment().format("HH:mm");
    this.hourTimer = setInterval(() => {
      this.hour = moment().format("HH:mm");
    }, 10 * 1000);
  },
  mounted() {
    this.getMainData();
  },
  beforeDestroy() {
    clearInterval(this.hourTimer);
    clearInterval(this.snappedUpTimer);
  },
  methods: {
    bannerTo (link) {
      window.location.href = link
    },
    detailsclick(id, type) {
      this.$router.push({
        path: "/shopping/details",
        query: {
          id: id,
          type: type
        }
      });
    },
    goToList(type) {
      this.$router.push({
        path: "/list",
        query: {
          type
        }
      });
    },
    async getMainData() {
      const result = await this.$fetchGet("/home/index/index");
      if (!result.success) {
        this.$toast(result.msg);
        return;
      }
      this.bannerList = result.data.bannerlist.map(item => {
        return {
          imgUrl: item[0],
          link: item[1]
        }
      });
      this.classList = result.data.linklist;
      this.newShoppingList = result.data.newproduct
      this.snappedUpList = result.data.flashsale
      this.flashgroup = result.data.flashgroup
      if (this.snappedUpList.length) {
        this.snappedUpTime = this.formatSeconds(this.snappedUpList[0].timeto - parseInt(moment().valueOf() / 1000))
        this.snappedUpTimer = setInterval(() => {
          this.snappedUpTime = this.formatSeconds(this.snappedUpList[0].timeto - parseInt(moment().valueOf() / 1000))
        }, 1000)
      }
    },
    formatSeconds(value) {
      var theTime = parseInt(value); // 秒
      var middle = 0; // 分
      var hour = 0; // 小时
      if (theTime > 60) {
        middle = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (middle > 60) {
          hour = parseInt(middle / 60);
          middle = parseInt(middle % 60);
        }
      }
      var result = "" + parseInt(theTime) + "秒";
      if (middle > 0) {
        result = "" + parseInt(middle) + "分" + result;
      }
      if (hour > 0) {
        result = "" + parseInt(hour) + "小时" + result;
      }
      return result;
    },
    /*
     *@name: 分类点击
     *@param:{type}
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-04-27 21:09:25
     */
    classClick(item) {
      this.$router.push({
        path: `/class?id=${item.id}`
      });
    }
  }
};
</script>

<style lang="scss">
.home {
  &-container {
    background: #fafafa;
    height: calc(100vh - 100px);
    position: relative;
    overflow-y: auto;
    .van-swipe {
      height: 500px;
      .van-swipe-item {
        height: 500px;
        img {
          width: 100vw;
          height: 500px;
        }
      }
      // .van-swipe__indicators {
      //   bottom: 100px;
      // }
    }
    .home-class-container {
      width: 100vw;
      background: #fff;
      position: absolute;
      // left: 10vw;
      top: 500px;
      // border-radius: 30px;
      padding: 10px;
      box-shadow: 0 0 10px #888;
      height: 335px;
      .class-item {
        display: inline-block;
        width: 20%;
        padding: 10px;
        text-align: center;
        img {
          width: 100px;
          height: 100px;
        }
        .class-name {
          // margin-top: ;
          font-size: 26px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .new-shopping-container {
      margin-top: 400px;
      padding: 20px 40px;
      background: #fff;
      box-shadow: 0 0 10px #888;
      height: 280px;
      .new-shopping-header {
        display: flex;
        vertical-align: bottom;
        img {
          width: 67px;
          height: 20px;
          height: auto;
          vertical-align: middle;
          display: inline-block;
        }
        .title {
          font-size: 30px;
          font-weight: bold;
          color: #ff3b3b;
          margin-right: 10px;
        }
        .date {
          font-size: 20px;
          padding-top: 10px;
          color: #696969;
          flex: 1;
        }
        .more {
          font-size: 20px;
          padding-top: 10px;
          color: #b2b2b2;
        }
      }
      .new-shopping-main {
        // display: flex;
        margin-top: 50px;
        overflow-x: auto;
        white-space: nowrap;
        .new-shopping-item {
          // width: 25%;
          width: calc((100vw - 80px) / 4);
          display: inline-block;
          text-align: center;
          img {
            width: 100px;
          }
          .new-price {
            color: #ff4848;
            margin-right: 5px;
          }
          .old-price {
            color: #dddddd;
            text-decoration: line-through;
          }
        }
      }
    }
    .snapped-up-container {
      margin: 50px 0 50px 10vw;
      width: 80vw;
      height: 100px;
      border-radius: 50px;
      background: linear-gradient(to right, #fc8f04, #f71c19);
      display: flex;
      padding-top: 15px;
      & > div {
        flex: 1;
        height: 70px;
      }
      .left-container {
        border-right: 1px solid #fff;
        line-height: 70px;
        text-align: center;
        font-size: 30px;
        color: #fff;
        font-weight: bold;
      }
      .right-container {
        text-align: center;
        color: #ffffff;
        .date {
          font-size: 20px;
        }
        .time {
          font-size: 30px;
        }
      }
    }
    .snapped-up-shopping {
      margin-bottom: 50px;
      &-header {
        display: flex;
        margin-bottom: 20px;
        .left {
          flex: 1;
          text-align: center;
        }
        .right {
          flex: 1;
          text-align: center;
          span {
            color: #fe5959;
          }
        }
      }
      &-main {
        // display: flex;
        background: linear-gradient(to right, #fc8f04, #f71c19);
        padding: 20px 0;
        overflow-x: auto;
        white-space: nowrap;
      }
      &-item {
        display: inline-block;
        width: calc((100vw - 80px) / 3);
        margin-left: 20px;
        color: #ffffff;
        img {
          width: 100%;
          // height: auto;
          height: 250px;
        }
        &:last-child {
          margin-right: 20px;
        }
        .name {
          // overflow: hidden;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .footer {
          display: flex;
          margin-top: 10px;
          .left {
            flex: 2;
            .new {
              font-size: 25px;
              font-weight: 500;
            }
            .old {
              font-size: 20px;
              text-decoration: line-through;
            }
          }
          .right {
            flex: 1;
            font-size: 40px;
            line-height: 60px;
            text-align: center;
            font-weight: bold;
          }
        }
      }
    }
    .together {
      margin: 50px 0 50px 10vw;
      width: 80vw;
      margin-left: 10vw;
      position: relative;
      img {
        width: 100%;
        height: auto;
      }
      .content {
        position: absolute;
        top: 20px;
        left: 130px;
        color: #fff;
        text-align: right;
        .title {
          font-size: 35px;
          font-weight: bold;
          letter-spacing: 5px;
        }
      }
    }
    .ad {
      margin-bottom: 50px;
      img {
        width: 100vw;
        height: auto;
      }
    }
  }
}
</style>